<template>
	<div class="task">
		<div class="task-header">
			<div class="task-header-border"></div>
			<div class="task-header-title">
				<i class="task-header-title-icon el-icon-s-grid"></i>
				<h2 class="task-header-title-name">任务概览</h2>
			</div>
			<div class="task-header-actions">
        <el-tooltip class="item" effect="dark" content="上移" placement="right">
          <i class="el-icon-top upwardTitle" v-if="itemIndex != 0" @click="upClick"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="下移" placement="right">
          <i class="el-icon-bottom upwardTitle" v-if="itemIndex != 2" @click="downClick"></i>
        </el-tooltip>
			</div>
		</div>
		<div style="flex: 1;display: flex;flex-direction: column;" v-loading="loading">
			<div class="task-content">
				<div class="overall-content-progress">
					<el-progress type="circle" :percentage="taskProgress"></el-progress>
				</div>
				<div class="overall-content-progress">
					<el-progress type="circle" :percentage="projProgress"></el-progress>
				</div>
			</div>
			<div class="task-content" >
				<div class="overall-content-item">
					<span class="overall-content-item-name">总任务数</span>
					<span class="overall-content-item-num">{{taskTotal.taskNum}}</span>
				</div>
				<div class="overall-content-item">
					<span class="overall-content-item-name">完成任务数</span>
					<span class="overall-content-item-num">{{taskTotal.finishNum}}</span>
				</div>
				<div class="overall-content-item">
					<span class="overall-content-item-name">逾期任务数</span>
					<span class="overall-content-item-num">{{taskTotal.timeoutNum}}</span>
				</div>
				<div class="overall-content-item">
					<span class="overall-content-item-name">总项目数</span>
					<span class="overall-content-item-num">{{projTotal.projNum}}</span>
				</div>
				<div class="overall-content-item">
					<span class="overall-content-item-name">完成项目数</span>
					<span class="overall-content-item-num">{{projTotal.finishNum}}</span>
				</div>
				<div class="overall-content-item">
					<span class="overall-content-item-name">逾期项目数</span>
					<span class="overall-content-item-num">{{projTotal.timeoutNum}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {summarize as summarizeTotal} from '@/api/task.js'
	import {summarize as projsummarize} from '@/api/project.js'
	export default {
		name: "myProject",
		data() {
			return {
				loading: false,
				refresh: false,
				great: false,
				overallForm: [{
						name: '总项目数',
						num: '0'
					},
					{
						name: '完成项目数',
						num: '0'
					},
					{
						name: '逾期项目数',
						num: '0'
					},
					{
						name: '总任务数',
						num: '0'
					},
					{
						name: '完成任务数',
						num: '0'
					},
					{
						name: '逾期任务数',
						num: '0'
					},
				],
				taskTotal: [],
				projTotal: [],
				taskProgress: 0,
				projProgress: 0
			}
		},
		components: {},
		props:['itemIndex'],
		created() {
			// 接下来的使用就跟之前一样，初始化图表，设置配置项
			this.summarizeTask()
			this.summarizeProj()
		},
		methods: {
			summarizeTask() {
				var _this = this
				summarizeTotal({},false).then(res => {
					console.log(res)
					_this.taskTotal = res.data
					if(res.data.taskNum > 0){
						_this.taskProgress = Number(((res.data.finishNum/res.data.taskNum)*100).toFixed(2))
					}else{
						_this.taskProgress = 100
					}

				})
			},
			summarizeProj() {
				var _this = this
				projsummarize({},false).then(res => {
					console.log(res)
					_this.projTotal = res.data
					if(res.data.projNum > 0){
						_this.projProgress =Number( ((res.data.finishNum/res.data.projNum)*100).toFixed(2))
					}else{
						_this.projProgress = 100
					}

				})
			},
			refreshClick() {
				var _this = this
				this.loading = true
				this.refresh = true
				setTimeout(function() {
					_this.loading = false
					_this.refresh = false
				}, 2000)
			},
			currentChange(data) {
				var _this = this
				this.loading = true
				setTimeout(function() {
					_this.loading = false
				}, 2000)
			},
			greatClick() {
				this.great = !this.great
			},
			projectClick() {
				this.$router.push({
					path: '/project/details'
				})
			},
			upClick(){
				this.$emit('upClick',this.itemIndex)
			},
			downClick(){
				this.$emit('downClick',this.itemIndex)
			}
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.task {
		flex-grow: 1;
		height: 400px;
		display: flex;
		flex-direction: column;
		box-shadow: inset 0 0 0 1px #ecedf0;
		background-color: #fff;
		border-radius: 6px;
		overflow: hidden;
		position: relative;
		margin-bottom: 20px;
	}

	.task-header {
		flex: none;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 52px;
		padding: 0 24px;
		justify-content: space-between;
		padding-top: 10px;
		margin-top: 10px;
	}

	.task-header-border {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: block;
		border-top: 5px solid transparent;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		pointer-events: none;
		border-color: rgb(222, 53, 12);
		;
	}

	.task-header-title {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.task-header-title-icon {
		font-size: 16px;
		margin-right: 4px;
		color: #cce2ff;
	}

	.task-header-title-name {
		min-width: 0;
		margin: 0;
		font-size: 16px;
		line-height: 24px;
		font-weight: 600;
		color: #2e405e;
	}

	.task-header-actions {
		display: flex;
		flex-direction: row;
		align-items: center;
	}


	.task-content {
		margin: 2px 12px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		overflow: auto;
		flex: 1;
		align-items: center;
	}

	.refreshRe {
		-webkit-animation: rotate 1.2s linear infinite;
		/*Safari and Chrome*/
	}

    .overall-content-progress{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
	}

	.overall-content-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 112px;
	}

	.overall-content-item:hover {
		background-color: #F1F1F1;
	}

	.overall-content-item-name {
		margin-top: 0;
		font-size: 13px;
		font-weight: 400;
		line-height: 18px;
		color: #2e405e;
	}

	.overall-content-item-num {
		font-size: 24px;
		font-weight: 300;
		line-height: 28px;
		color: #2e405e;
		display: block;
		margin-top: 10px;
	}

	@keyframes rotate {
		0% {
			transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			/* IE 9 */
			-moz-transform: rotate(360deg);
			/* Firefox */
			-o-transform: rotate(360deg);
		}

		100% {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			/* IE 9 */
			-moz-transform: rotate(0deg);
			/* Firefox */
			-o-transform: rotate(0deg);
		}
	}

	@-webkit-keyframes rotate {
		0% {
			-moz-transform: rotate(360deg);
		}

		100% {
			-moz-transform: rotate(0deg);
		}
	}

	/*修改element样式*/
	/deep/.el-tabs__nav-wrap::after {
		background-color: white;
	}

	/deep/.el-tabs__item {
		color: #909aaa;
		padding: 0 10px;
	}

	/deep/.el-tabs__item.is-active {
		color: #1890ff;
	}
	.upwardTitle{
		cursor: pointer;
		color: #909aaa;
		font-size: 20px;
		line-height: 24px;
		text-align: center;
		margin-left: 10px;
	}
</style>
